<template>
  <el-container>
    <el-header>
      <h3>Login</h3>
    </el-header>
    <el-main>
      <el-form ref="loginForm" :model="loginData" label-width="80px">
        <el-form-item label="Username">
          <el-input v-model="loginData.username"></el-input>
        </el-form-item>
        <el-form-item label="Password">
          <el-input type="password" v-model="loginData.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">Login</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>
<script setup lang="ts">
import {ref} from 'vue';
import {userLogin} from "../api/user.ts";
import {NAMESPACE_USER} from "../interface/user.ts";
import {messageTip, MessageTipType} from "../util/common.ts";
import {useRouter} from "vue-router";
import {useTokenStore} from "../store/tokenStore.ts";
const tokenStore = useTokenStore();
const router = useRouter()

const loginData = ref<NAMESPACE_USER.UserLogin>({
  username:"",
  password:"",
})
const login = () => {
  userLogin(loginData.value).then(
      data => {
        if (data.success){
          messageTip("登录成功", MessageTipType.SUCCESS)
          tokenStore.currentUser()
          router.push("/")
        }else {
          messageTip(data.message, MessageTipType.ERROR)
        }
      }
  )
}

</script>